<script setup lang="ts">
// import type { PropType } from "vue";
// interface IUser {
//   name: string;
//   age: number;
// }
// String Number 不是TS的类型，而是Vue3的
// defineProps({
//   foo: { type: String, required: true },
//   bar: Number,
//   // 如果是复杂类型，需要用工厂函数返回默认值
//   // user: {
//   //   type: Object,
//   //   default: () => ({ name: "张三", age: 18 }),
//   // },
//   // 结合PropType工具以及TS 增强对象的类型约束
//   user: Object as PropType<IUser>,
// });

// TS的类型约束
import type { IProps_01 } from "../types";
// defineProps<IProps_01>() // 使用TS进行类型约束
// 使用withDefaults 设置props的默认值
withDefaults(defineProps<IProps_01>(), {
  bar: 2,
});
</script>

<template>
  <h3>01-为组件的 props 标注类型</h3>
  <p>foo: {{ foo }}</p>
  <p>bar: {{ bar }}</p>
  <button @click="sendData('hello')">发送数据</button>
</template>

<style scoped></style>
